<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { reactive } from "@vue/reactivity";
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

// 获取数据
onMounted(() => { 
    getList()
})

// 列表数据
const data = reactive<any>({
    list: [],
    pageIndex: 1,
    pageSize: 20,
    loading: false
})
const getList = () => {
    data.loading = true
    setTimeout(() => {
        data.loading = false
        const arr = [];
        for(let i = 0; i < 50; i++) {
            arr.push({id: 0, name: '猪八戒', type: '天庭天神', life: '987', mode: '调戏嫦娥', time: '贞观123年'});
        }
        data.list = arr
    }, 1000)
}
const onSizeChange = (value: number) => {
    data.pageSize = value
    getList()
}
const onCurrentChange = (value: number) => {
    data.pageIndex = value
    getList()
}

// 搜索
const searchKey = ref('')
const onSearch = () => {
    getList()
}

// 轮回
const router = useRouter()
const bindComing = (row: any) => {
    router.push({ path: `/layout/lunhui/detail/${row.id}`})
}
</script>

<template>
    <!-- 六道轮回 -->
    <div class="lunhui">
        <div class="z-option">
            <div class="option-left">
                <div class="option-item">
                    <el-input v-model="searchKey" size="large" placeholder="输入要搜索的内容" :suffix-icon="Search" />
                </div>
                <div class="option-item">
                    <el-button type="primary" size="large" @click="onSearch">搜索</el-button>
                </div>
            </div>
        </div>
        <div class="z-table">
            <el-table :data="data.list" v-loading="data.loading" :max-height="710" size="large">
                <el-table-column prop="id" label="ID" align="center"/>
                <el-table-column prop="name" label="姓名" align="center" width="200" />
                <el-table-column prop="life" label="寿命（岁）" align="center" />
                <el-table-column prop="type" label="类别" align="center" />
                <el-table-column prop="time" label="时间" align="center" />
                <el-table-column prop="mode" label="原因" align="center" width="300" />
                <el-table-column label="操作" align="center" width="300">
                    <template #default="scope">
                        <el-button type="primary" link @click="bindComing(scope.row)">轮回</el-button>
                        <el-button type="danger" link>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="z-pagination">
            <el-pagination background layout="total, prev, pager, next, sizes" :total="100" :page-sizes="[10, 15, 20]" @size-change="onSizeChange" @current-change="onCurrentChange"></el-pagination>
        </div>
    </div>
</template>

<style scoped lang="scss">

</style>